<template>
    <span>
        <el-drawer
          title="编辑合集"
          size="70%"
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
          :z-index="100005"
          append-to-body
        >
        <div class="fill-width-height" style="padding: 15px;">

          <el-row :gutter="20">
            <el-col :span="24" style="padding: 5px 0">
                <FileUpload v-model="itemObj.coverurl" :fileType="fileType" :extUploadFileUrl="uploadFileUrl" btnText="选择本地图片封面"/>

              <el-button type="success" plain icon="el-icon-edit" size="mini"  @click="addExtLink">选择外部图片</el-button>
            </el-col>
            <el-col :span="24" style="padding: 5px 0">
              <el-input v-model="itemObj.coverurl" placeholder="外部封面路径"></el-input>
            </el-col>

            <el-col :span="24" style="padding: 5px 0">
              <el-cascader
                v-model="itemObj.alltypeid"
                :props="{ checkStrictly: true, value: 'id',label: 'name' }"
                :options="typeList"
                placeholder="请选择分类"
                style="width: 100%;"
              >
              </el-cascader>
            </el-col>

            <!--          <el-col :span="24" style="padding: 5px 0"><el-input v-model="itemObj.collcode" placeholder="请输入code"></el-input></el-col>-->
            <el-col :span="24" style="padding: 5px 0"><el-input v-model="itemObj.collname" placeholder="请输入标题"></el-input></el-col>
            <el-col :span="24" style="padding: 5px 0"><el-input v-model="itemObj.colldescribe" placeholder="请输入描述"></el-input></el-col>
            <el-col :span="24"  style="padding: 5px 0"><el-input v-model="itemObj.ordernum" placeholder="请输入顺序"></el-input></el-col>
          </el-row>
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="submit">提交</el-button>
        </div>
      </el-drawer>

      <el-dialog :visible.sync="linkDialogVisible" width="90%" title="选择爬取任务的图片" :z-index="1000009" modal-append-to-body>
        <div class="dialog-content flex-col" style="height: 700px;">
          <ImageCrawlerSelectData ref="imageCrawlerRef" :is-single="true" class="flex-1" style="min-height: 0;overflow: hidden"/>
          <el-divider />
          <div class="d-flex align-center justify-center" style="padding-top: 5px;">
            <el-button type="primary" @click="configSelect">确定</el-button>
          </div>
        </div>
      </el-dialog>

    </span>
</template>

<script>
import {save ,update} from "@/api/imgManage/imgCollect";
import FileUpload from "@/components/FileUpload";
import {getList} from "@/api/imgManage/imgType";
import {listToTree} from "@/utils";
import ImageCrawlerSelectData from "@/views/imgManage/imageCrawler/selectData.vue";
export default {
  components: {
    ImageCrawlerSelectData,
    FileUpload
  },
  props: {
    mode: {},
    item: {}
  },
  data(){
    return {
      activeId: 'all',
      allObj: { value:'all', label: '全部' ,id:'all', name: '全部', level: 1 },
      typeList: [],

      drawer: false,
      isSuccess: false,
      direction: 'rtl',
      fileType: ['png','jpeg','jpg','webp'],
      itemObj: {
        alltypeid: '',
        coverurl: '',
        title: '',
        colldescribe: '',
        clickurl: '',
        cardtype: '',
        ordernum: ''
      },
      uploadFileUrl: this.$config.urlFormat('/file/upload'),

      linkDialogVisible: false,
    }
  },
  methods: {
    addExtLink(){
      this.linkDialogVisible = true
    },
    configSelect(){
      const data = this.$refs.imageCrawlerRef?.getSelectedData() || []
      if(!data[0]){
        return
      }
      this.itemObj.coverurl = data[0].imageSrc
      this.linkDialogVisible = false
    },

    async initTypeList(){
      const dataList = await getList({ bustype: 'coll' }).then(res => res.data )
      dataList.forEach((item) => {
        item.label = item.name
        item.value = item.id
      })
      const treeList = listToTree(dataList,'id','parentid')
      treeList.forEach((item) => {
        if(item?.children?.length === 0){
          delete item.children
        }
      })
      treeList.unshift(this.allObj)
      this.typeList = treeList
    },

    init(){
      if(this.mode === 'add'){
        this.itemObj = {}
      } else if(this.mode === 'view' || this.mode === 'edit'){
        this.itemObj = Object.assign({},this.item)
      }
    },
    handleOpen(){
      this.isSuccess = false
      this.drawer = true
      setTimeout(() => {
        this.init()
      },50)
    },
    handleClose(done) {
      done();
    },
    successCallBack(){
      this.$emit('callBack')
      this.isSuccess = true
      this.drawer = false
      this.$modal.msgSuccess("保存成功")
    },
    submit(){
      this.isSuccess = false
      const submitObj = this.itemObj
      if(submitObj.alltypeid instanceof Array){
        submitObj.alltypeid = submitObj.alltypeid.join(',')
      }
      if(this.mode === 'add'){
        save(submitObj).then(res => {
          this.successCallBack()
        })
      } else {
        update(submitObj).then(res => {
          this.successCallBack()
        })
      }
    }
  },
  mounted() {
    this.initTypeList()
  }
}
</script>

<style scoped lang="scss">

</style>
